<template>
    <div>
        <van-swipe @change="onChange" :loop="false" :width="300" :show-indicators="false">
            <van-swipe-item class="free-swipe" style="width: 300px;" v-for="(item,index) in topicArr" :key="index">
                <img v-lazy="item.scene_pic_url" alt="" />
                <h2>
                    {{item.title}}
                    <span>{{item.price_info|RMB}}</span>
                </h2>
                <p>{{item.subtitle}}</p>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
    export default {
        props: ["topicArr"],
        data() {
            return {
                current: 0,
            };
        },
        methods: {
            onChange(index) {
                this.current = index;
            },
        },
    };
</script>

<style lang="less" scoped>
    .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
    }

    .free-swipe {
        padding-bottom: 10px;
        
        margin-right: 15px;

        h2 {
            line-height: 40px;
            font-size: 16px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 90%;

            span {
                color: darkred;
            }
        }

        p {
            font-size: 14px;
            margin: 0px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 90%;
        }

        img {
            width: 100%;
            height: 200px;
        }
    }
</style>